(function($){
		
		$.Class.extend(hg.base, "hg.base.Slide", {
			init: function(cfg){
				this.extendDefault({
					animLayerW: 660,
					animLayerH: 605,
					closeimg: 'http://images.hangame.co.jp/hangame/core/screenshot/btn_close.gif'
				});
				
				
				this.el = cfg.el;
				this.durationin = cfg.durationin;
				this.durationout = cfg.durationout;
				this.effectin = cfg.effectin;
				this.effectout = cfg.effectout;
				this.params = this.getParams(cfg.el);
				this.ox = this.getOffsetX(cfg.el);
				this.oy = this.getOffsetY(cfg.el);
				
			},
			
			getParams: function(el){
				var 
					elWidth      = $(el).width(),
					elHeight     = $(el).height(),
					windowWidth  = $(window).width(),
					windowHeight = $(window).height(),
					scrollLeft   = $(document).scrollLeft(),
					scrollTop    = $(document).scrollTop();
				
				return [elWidth, elHeight,
						windowWidth, windowHeight,
						scrollLeft, scrollTop];
			},
			
			getOffsetX: function(elem){
				return $(elem).offset().left;
			},
			
			getOffsetY: function(elem){
				return $(elem).offset().top;
			},
			
			getTitle: function(elem){
				return $(elem.parentNode).attr('title') || '';
			},
			
			getSrc: function(elem){
				return $(elem).attr('src') || '';
			},
			
			getAdapt: function(){
				var 
					alayer = $('#animlayer'),
					ilayer = $('#imglayer'),
					_this  = this,
					adapt;
				
				adapt = function(event){
					var 
						elem   = _this.el,
						params = _this.getParams(elem),
						layerW = _this.option.animLayerW,
						layerH = _this.option.animLayerH,
						x,y;
					
					
					x = params[4] + (params[2]/2) - (layerW/2);
					y = params[5] + (params[3]/2) - (layerH/2);
					
					ilayer.css('left',x + 'px');
					ilayer.css('top',y + 'px');
					alayer.css('left',x + 'px');
					alayer.css('top',y + 'px');
					
				};
				
				return adapt;
			},
			
			
			getThumbs: function(src){
				var 
					thumb    = $("#wrapper li img"),
					htmlFrag = '',
					i = 0, imgsrc;
				
				for(;i<thumb.length;i++){
					
					imgsrc = $(thumb[i]).attr('src');
					hg.base.Slide.offset[imgsrc] = this.getOffsetX(thumb[i]);
					
					
					if(src == imgsrc)
						htmlFrag += '<li><a class="active" title="' + 
											this.getTitle(thumb[i]) + 
											'"><img border="0" src="';
					else
						htmlFrag += '<li><a class="thumb" title="'  + 
											this.getTitle(thumb[i]) + 
											'"><img border="0" src="';
					
					htmlFrag += $(thumb[i]).attr('src');
					htmlFrag += '"></a></li>';
				}
				
				return htmlFrag;
			},
			
			
			updateThumbs: function(imgsrc){
				var 
					thumbs = $('#imglist a'),
					i     = 0,
					img, src;
				
				for(;i<thumbs.length;i++){
					
					src = $(thumbs[i]).find('img').attr('src');
					
					if(imgsrc == src)
						thumbs[i].className = 'active';
					else
						thumbs[i].className = 'thumb';
				}
			},
			
			
			thumbsClick: function(){
				var 
					navThumb = $("#imglist li img"),
					_this    = this,
					i        = 0;
				
				for(;i<navThumb.length;i++){
					
					$(navThumb[i]).bind('click',function(e){
						
						var 
							src  = $(this).attr('src'),
							title;
						
						hg.base.Slide.offset.x = 
								hg.base.Slide.offset[src];
						
						title = this.parentNode.title;
						$('#disimg').attr('src',title);
						
						_this.updateThumbs(src);
					});
				
				}
			},
			
			
			
			display: function(){
				var 
					detect = $('#imglayer')[0],
					elem   = this.el,
					src, title, htmlFrag;
				
				if(detect){
					
					src   = this.getSrc(elem);
					title = this.getTitle(elem);
					
					hg.base.Slide.offset.x = this.getOffsetX(elem);
					hg.base.Slide.offset.y = this.getOffsetY(elem);
					
					
					
					$('#disimg').attr('src',title);
					this.updateThumbs(src);
					
					return;
				}
				
				
				src 	 = this.getSrc(elem);
				htmlFrag = this.getThumbs(src);
				
				this.skeleton(htmlFrag);
				this.thumbsClick();
				
				this.animate();
			},
			
			
			animate: function(){
				
				var 
					elem    = this.el,
					durtion = this.durationin,
					effect  = this.effectin,
					params  = this.params,
					layerW  = this.option.animLayerW,
					layerH  = this.option.animLayerH,
					offsetX = this.ox,
					offsetY = this.oy,
					_this   = this,
					x,y,
					animx,animy,
					alayer,ilayer,cb,finish;
				
				x = params[4] + (params[2]/2) - (layerW/2);
				y = params[5] + (params[3]/2) - (layerH/2);
				
				
				hg.base.Slide.offset.x = offsetX;
				hg.base.Slide.offset.y = offsetY;
				
				
				animx = x - offsetX;
				if(animx > 0){
					animx = '+=' + animx + 'px';
				}else{
					animx = '-=' + (-animx) + 'px';
				}
				
				animy = y - offsetY;
				if(animy > 0){
					animy = '+=' + animy + 'px';
				}else{
					animy = '-=' + (-animy) + 'px';
				}
				
				
				alayer = $('#animlayer');
				ilayer = $('#imglayer');
				cb     = this.callBack;
				
				finish = 
				function(){ 
					window.setTimeout(function(){
						alayer.hide();
						ilayer.css('top',alayer.css('top'));
						ilayer.css('left',alayer.css('left'));
						ilayer.show();
						cb.call(_this,elem);
					},50);
					
				};
				
				alayer.animate({'height' : '+=' + (layerH-params[1]+1)  + 'px',
							    'width'  : '+=' + (layerW-params[0]+1) + 'px',
							    'top'    : animy,
							    'left'   : animx//,
							    //'opacity': '+=0.7'
							   }, durtion, effect, finish);
			},
			
			
			
			callBack: function(elem){
				var 
					imgclose = $('#imgclose'),
					alayer   = $('#animlayer'),
					ilayer   = $('#imglayer'),
					durtion  = this.durationout,
					effect   = this.effectout,
					params   = this.params,
					adapt    = this.getAdapt(),
					finish;
				
				
				
				finish = 
				function(e){
					var 
						tempw = parseInt(alayer.css('width')),
						temph = parseInt(alayer.css('height')),
						tempt = parseInt(alayer.css('top')),
						templ = parseInt(alayer.css('left')),
						offsetX  = hg.base.Slide.offset.x,
						offsetY  = hg.base.Slide.offset.y,
						tt, ll;
					
					
					(tempt - offsetY) > 0 ? 
							 (tt = ('-=' + (tempt - offsetY) + 'px')) : 
							 (tt = ('+=' + (offsetY - tempt) + 'px'));
					
					(templ - offsetX) > 0 ? 
							 (ll = ('-=' + (templ - offsetX) + 'px')) : 
							 (ll = ('+=' + (offsetX - templ) + 'px'));
					
					
					ilayer.fadeOut(200,function(){
						window.setTimeout(function(){
							alayer.show();
							//ilayer.hide();
							ilayer[0].parentNode.removeChild(ilayer[0]);
							
							alayer.animate({'height' : '-=' + (temph - params[1]) + 'px',
										    'width'  : '-=' + (tempw - params[0]) + 'px',
										    'top'    : tt,
										    'left'   : ll
									       }, durtion, effect,
									       
										   function(){
											   alayer[0].parentNode.removeChild(alayer[0]);
											   $(window).unbind('resize', adapt);
											   $(document).unbind('click', finish);
											   //alayer.hide();
										   });
						},20);
						
					});
					
					
				};
				
				$(window).bind('resize', adapt);
				$(document).bind('click', finish);
				imgclose.bind('click', finish);
			},
			
			
			skeleton: function(htmlFrag){
				var 
					layerW  = this.option.animLayerW,
					layerH  = this.option.animLayerH,
					closeI  = this.option.closeimg,
					elem    = this.el,
					params  = this.params,
					offsetX = this.ox,
					offsetY = this.oy,
					title   = this.getTitle(elem);
				
				$('body').append('<div id="imglayer"><div id="imgwraper">' + 
				                    '<img id="disimg" border="0" src=""> ' + 
								'</div><div id="imgnav"><ul id="imglist">' + 
																  htmlFrag + 
				              '</ul></div><div id="imgclose"></div></div>');
				
				
				$('body').append('<div id="animlayer"></div>');
				
				$('#imglayer').css('background-color','#fff')
							  .css('width',layerW + 'px')
							  .css('height',layerH + 'px')
							  .css('position','absolute')
							  .css('display','none')
							  .css('text-align','center')
							  .css('border','1px solid #B3B3B1')
							  .bind('click',function(e){
							  	e.stopPropagation();
							  });
				
				$('#imgwraper').css('width','640px')
							   .css('height','480px')
							   .css('margin','0 auto')
							   .css('padding-top','9px');
				
				$('#imgnav').css('width','640px')
							.css('height','90px')
							.css('margin','0 auto')
							.css('padding-top','9px');
				
				$('#imglist').css('list-style-type','none')
							 .css('margin','10px auto 0')
							 .css('width','450px');
				
				$('#imgclose').css('width','19px')
							  .css('height','19px')
							  .css('position','absolute')
							  .css('background-image','url('+closeI+')')
							  .css('bottom','20px')
							  .css('right','20px')
							  .css('cursor','pointer');
				
				$('#animlayer').css('width',params[0])
							   .css('height',params[1])
							   .css('background-color','#000000')
							   .css('opacity','0')
							   .css('position','absolute')
							   .css('top', offsetY)
							   .css('left',offsetX)
							   .css('opacity',0.7);
				
				$('#disimg').attr('src',title);
			}
			
			
		});
		
		hg.base.Slide.offset = {};
		
		var hbs = function(elem){
			var cfg = {
					el: elem,
					durationin: 400,
					durationout: 200,
					effectin: 'swing',
					effectout: 'swing'
				},
				len = arguments.length,
				i   = 1,
				p, param;
			
			for(; i<len; i++){
				param = arguments[i];
				switch(typeof param){
					case "object":
						for(p in param){
							cfg[p] = param[p];
						}
				}
			}
			return new hg.base.Slide(cfg);
		};
		window.hbs = hbs;
	})(jQuery);